<template>
	<view>
		<view class="search_input">
			<uni-easyinput suffixIcon="search" :trim="true" v-model="searchValue" placeholder="请输入内容"
				@iconClick="onClick"></uni-easyinput>
		</view>
		<scroll-view scroll-y class="select_content">
			<view class="wrap">
				<view class="select_item" v-for="(item,index) in searchItems" :key="index">
					<go-detail :list="searchItems" :index="index">
						<image :src="item.thumb" mode="widthFix"></image>
					</go-detail>
				</view>
			</view>
			
		</scroll-view>
	</view>
</template>

<script>
	import goDetail from '../../components/goDetail.vue'
	export default {
		components:{
			goDetail
		},
		data() {
			return {
				allItems: [],
				searchItems: [],
				params: {
					limit: 40,
					skip: 0
				},
				searchValue: ""
			}
		},
		created() {
			// 创建的时候就获取数据
			for (var i = 0; i < 80; i++) {
				this.params.skip += this.params.limit;
				this.getList();
			}
		},
		methods: {
			 getList() {
				this.request({
					url: '/v1/vertical/vertical',
					data: this.params
				}).then(result => {
					this.allItems = [...this.allItems, ...result.res.vertical];
				})
			},
			onClick() {
				this.searchItems = []
				// 对所有数据进行过滤
				this.searchItems = this.allItems.filter(item => {
					return item.tag.indexOf(this.searchValue) > -1;
				})
				// 打印过滤之后的数据
				console.log(this.searchItems);
			}
		}
	}
</script>

<style lang="scss">
	.search_input{
		padding: 10rpx 0;
	}
 .select_content{
	 // #ifdef H5
	 height: calc(100vh - 140px);
	 // #endif

	 // #ifndef H5
	 height: calc(100vh - 40px);
	 // #endif
	 .wrap{
		 display: flex;
		 flex-wrap: wrap;
		 .select_item{
		 		 width: 33.33%;
		 		 border: 3rpx solid #fff;
		 		 image{}
		 }
	 }
 }
</style>
